<!-- 热门景点搜索 -->
<template>

	<view class="content">
		<view class="content-block">
			<View class="block1">
				<view class="search">
					<u--input v-model="name" border="none" clearable placeholder="搜索景点..." prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					<tui-text class="search-text" text="搜索" @click="searchEvent"></tui-text>
				</view>
			</View>
			<view class="block3">
				<view class="dropDownBox">
					<view class="picker-group" @click="showAnew = true">
						<view class="picker">
							综合排序
							<tui-icon name="turningdown" size="18"></tui-icon>
						</view>
					</view>
					<view class="picker-group" @click="showOne = true">
						<view class="picker">
							{{ tabsOne }}
							<!-- 倒三角图标 -->
							<tui-icon name="turningdown" size="18"></tui-icon>
						</view>
					</view>

					<view class="picker-group" @click="showThree = true">
						<view class="picker">
							{{ tabsThree }}
							<tui-icon name="turningdown" size="18"></tui-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="block2">
				<block v-for="(item,index) in popularSite" :key="index">
					<jingdian :objData="item"></jingdian>
				</block>
			</view>
			<view class="block5">
				<view v-if="popularSite.length < total" class="">
					<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
				</view>

				<view v-else class="noMore">
					<tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
				</view>
			</view>
		</view>
		<!-- 综合排序 -->
		<u-picker ref="uPickerAnew" :columns="columnsAnew" :show="showAnew" @cancel="showAnew = false"
			@confirm="confirmAnew">
		</u-picker>
		<!-- 地区 -->
		<u-picker ref="uPickerOne" :columns="columns" :show="showOne" @cancel="showOne = false" @change="changeHandler"
			@confirm="confirmOne">
		</u-picker>
		<!-- 风景类型 -->
		<u-picker ref="uPickerThree" :columns="columnslandscapeName" :show="showThree" @cancel="showThree = false"
			@change="changeLandscape" @confirm="confirmThree">
		</u-picker>
	</view>
</template>

<script>
	import jingdian from '@/components/diy/jingdian';
	import {
		popular_destination,
		Popular_route,
		findRegions,
		findDictTree,
		scenicPage
	} from "@/api/challenge";
	// data 数据 及 方法
	export default {
		components: {
			jingdian
		},
		data() {
			return {
				total: 0,
				listData: [],
				showOne: false,
				showTwo: false,
				showThree: false,
				showAnew: false,
				tabsOne: "景点地区",
				tabsTwo: "全部",
				tabsThree: "景点类型",
				timer: null,
				activeId: 1,
				areaOnePid: [""],
				areaTwoPid: [],
				areaThreePid: [],
				columnsAnew: [
					['综合排序']
				],
				columns: [
					["全部"],
				],
				columnOneData: [],
				columnTwoData: [],
				columnsTypeName: [
					["全部", '团建类', "亲子类", "研学类", "个人类"]
				],
				columnsTypeId: ["", 1, 2, 3, 4],
				columnslandscapeName: [
					["全部"],
				],
				columnslandscapeOneName: [
					[]
				],
				columnslandscapeOneId: [
					[]
				],
				requestObj: {
					tel: "",
					name: "",
					dictId: "",
					regionId: "",
					type: "",
					pageNumber: 1,
					pageSize: 10,
				},
				name: '',
				dropdownShow: true,
				objData: {
					pageNumber: 1,
					pageSize: 10,
					name: "",
					dictId: "",
					regionId: ""
				},
				popularSite: [],
				listData: [],
				sortRange: ['综合排序', '价格', '评分'], // 排序选项
				areaRange: ['全部地区', '东部', '西部', '南部', '北部'], // 地区选项
				typeRange: ['全部类型', '自然风光', '历史文化', '现代娱乐'], // 类型选项
				sortIndex: 0, // 默认排序选择
				areaIndex: 0, // 默认地区选择
				typeIndex: 0, // 默认类型选择
			}
		},
		onLoad() {
			this.popularDestination()
			findRegions({
				pid: 0
			}).then(res => {
				res.forEach(item => {
					this.columns[0].push(item.name)
					this.areaOnePid.push(item.id)
				})
			})
			findDictTree({
				rootName: '景点类别'
			}).then(res => {
				console.log('景点', res);
				res.forEach((item, index) => {
					this.columnslandscapeName[0].push(item.name)
					this.columnslandscapeOneName.push([])
					this.columnslandscapeOneId.push([])
					item.children.forEach(params => {
						this.columnslandscapeOneName[index + 1].push(params.name)
						this.columnslandscapeOneId[index + 1].push(params.id)
					})
				})
			})

		},
		onReachBottom() {
			this.objData.pageNumber += 1
			this.popularDestination()
		},
		methods: {
			loadmore() {
				this.objData.pageNumber += 1
				this.popularDestination()
			},
			confirmAnew() {
				this.objData.pageNumber = 1
				this.objData.dictId = ""
				this.objData.regionId = ""
				this.tabsOne = '景点地区'
				this.tabsThree = '景点类型'
				this.popularDestination()
				this.showAnew = false
			},
			bindSortPickerChange(e) {
				this.sortIndex = e.detail.value;
			},
			bindAreaPickerChange(e) {
				this.areaIndex = e.detail.value;
			},
			bindTypePickerChange(e) {
				this.typeIndex = e.detail.value;
			},
			popularDestination() {
				var data = {}
				for (let key in this.objData) {
					if (this.objData[key] != '') {
						data[key] = this.objData[key]
					}
				}
				popular_destination(data).then(res => {
					if (this.objData.pageNumber > 1) {
						res.list.forEach(item => {
							this.popularSite.push(item)
						})
						this.total = res.total
					} else {
						this.popularSite = res.list;
						this.total = res.total
					}
				})
			},
			searchEvent() {
				this.objData.pageNumber = 1
				this.objData.name = this.name
				this.popularDestination()
			},

			AttractionsEvent(data) {
				uni.navigateTo({
					url: '/pages/home/AttractionsDetails?id=' + data
				})
			},
			scenicPageEvent() {
				let obj = {}
				for (let key in this.requestObj) {
					if (this.requestObj[key] != "") {
						obj[key] = this.requestObj[key]
					}
				}
				scenicPage(
					obj
				).then(res => {
					console.log('景点', res.records);
					this.listData = res.records
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerOne
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					if (index == 0) {
						console.log('全部', index);
						this.columnOneData = [],
							this.columnTwoData = [],
							picker.setColumnValues(1, [])
						picker.setColumnValues(2, [])
					} else {
						this.columnOneData = []
						this.areaTwoPid = []
						this.columnTwoData = []
						this.areaThreePid = []
						findRegions({
							pid: this.areaOnePid[index]
						}).then(res => {
							res.forEach(item => {
								this.columnOneData.push(item.name)
								this.areaTwoPid.push(item.id)
							})
							findRegions({
								pid: res[0].id
							}).then(params => {
								params.forEach(item => {
									this.columnTwoData.push(item.name)
									this.areaThreePid.push(item.id)
								})
							})
							// picker为选择器this实例，变化第二列对应的选项
							picker.setColumnValues(2, this.columnTwoData)
						})
						// picker为选择器this实例，变化第二列对应的选项
						picker.setColumnValues(1, this.columnOneData)
					}


				}
				if (columnIndex === 1) {

					this.columnTwoData = []
					this.areaThreePid = []
					console.log('222', index);
					findRegions({
						pid: this.areaTwoPid[index]
					}).then(res => {
						res.forEach(item => {
							this.columnTwoData.push(item.name)
							this.areaThreePid.push(item.id)
						})
					})
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columnTwoData)

				}
			},
			changeLandscape(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerThree
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnslandscapeOneName[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirmOne(e) {
				if (e.indexs[0] == 0) {
					this.objData.regionId = ""
					this.tabsOne = "全部"
				} else {
					this.objData.regionId = this.areaThreePid[e.indexs[2]]
					this.tabsOne = e.value[2]
				}
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showOne = false
			},
			confirmTwo(e) {
				this.requestObj.type = this.columnsTypeId[e.indexs[0]]
				this.tabsTwo = e.value[0]
				this.scenicPageEvent()
				this.showTwo = false
			},
			confirmThree(e) {
				console.log(e);
				if (e.value[0] == "全部") {
					this.objData.dictId = ""
					this.tabsThree = "全部"
				} else {
					this.objData.dictId = this.columnslandscapeOneId[e.indexs[0]][e.indexs[1]]
					this.tabsThree = e.value[1]
				}
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showThree = false
			},
			seleckEvent(data) {
				this.activeId = data
				if (data == 1) {
					this.showOne = true
				} else if (data == 2) {
					this.showTwo = true
				} else if (data == 3) {
					this.showThree = true
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC, PingFang SC-Regular;
		height: 100vh;
		background-color: #F2F2F2;
	}

	.block1 {
		width: 100%;

		background-color: #fff;
	}

	.block2 {
		margin-top: 20rpx;
		background-color: #F2F2F2;

	}

	.noMore {
		background-color: #F2F2F2;
		width: 100%;
		height: 250rpx;
	}

	.dropDownBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.picker-group-row {
		display: flex;
		align-items: center;
	}

	.picker-item {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.content-block {
		background-color: #F2F2F2;
	}

	.blocok5 {
		justify-content: center;
	}

	.block5 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		background-color: #F2F2F2;
	}

	.noMore {
		text-align: center;
	}

	.search {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #f2f2f2;
		padding: 20rpx 30rpx;


	}
</style>